<template>
  <div class="app">
    <h1>我是根组件APP</h1>

    <TodoHeader @getData="handler"></TodoHeader>

    <TodoFooter ref="footer"></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "",
  components: {
    TodoHeader,
    TodoFooter,
  },
  methods: {
    handler(params) {
      console.log(params);
    },
  },

  //组件挂载完毕
  mounted() {
    //  console.log('App组件',this.$taidi);
    //获取事件源
    //当前函数里面的this是App组件的VC
    //获取事件源子组件VC
    //绑定自定义事件

    //问题:$on是谁的方法?也是Vue.prototype原型的方法

    //下面代码含义:
    //给事件源MyFooter子组件实例绑定一个自定义事件alcohol
    //  this.$refs.footer.$on('alcohol',(params)=>{
    //       console.log(params);
    //  })

    this.$bus.$on("money", (money) => {
      console.log("爷爷" , money);
    });
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: #eee;
}
</style>